<template>
  <div class="shortUrl">
    <div class="create">
      <el-form label-position="top"
               label-width="100px">
        <el-form-item label="原网址">
          <el-input v-model="url"
                    :rows="3"
                    type="textarea"
                    resize="none" />
        </el-form-item>
      </el-form>

      <el-button type="primary"
                 @click="create">一键生成</el-button>
      <el-form label-position="top"
               label-width="100px">
        <el-input class="result"
                  v-model="shortUrl"
                  readonly>
        </el-input>
      </el-form>

      <el-button type="primary"
                 style="margin-top: 20px;"
                 @click="copy">复制短网址</el-button>
    </div>
  </div>
</template>

<script lang='ts'>
import { ComponentInternalInstance, getCurrentInstance, ref } from "vue";
import Clipboard from "vue-clipboard3";
import { ElNotification } from "element-plus";
export default {
  setup() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const url = ref("");
    const shortUrl = ref("");
    const create = () => {
      proxy
        .axios({
          url: "/openapi/shortUrl",
          method: "post",
          headers: {
            "content-type": "application/x-www-form-urlencoded",
          },
          params: {
            url: url.value,
          },
        })
        .then(({ data }) => {
          shortUrl.value = data.data;
        });
    };
    const { toClipboard } = Clipboard();
    const copy = async () => {
      await toClipboard(shortUrl.value).then((res) => {
        ElNotification({
          title: "复制成功",
          message: "复制成功",
          duration: 2000,
          position: "top-left",
          showClose: false,
        });
      });
    };
    return { url, shortUrl, create, copy };
  },
};
</script>

<style lang="less" scoped>
.shortUrl {
  .create {
    .result {
      margin-top: 50px;
    }
  }
}
.email {
  .sendMail {
    margin-top: 50px;
  }
}
.utils {
}
</style>